<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="en"> <!-- 设置文档语言为英语 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度为设备宽度，初始缩放比例为1 -->
    <title>订单摘要</title> <!-- 设置网页标题 -->
    <link rel="stylesheet" href="支付页面.css"> <!-- 引入外部CSS样式表 -->
</head>
<body>
    <div class="order-summary"> <!-- 订单摘要容器 -->
        <div class="shipping-address"> <!-- 收货地址容器 -->
            <h2>收货地址</h2> <!-- 收货地址标题 -->
            <div class="address-info"> <!-- 地址信息容器 -->
                <p>梁志聪</p> <!-- 收货人姓名 -->
                <p>188****3550</p> <!-- 电话号码 -->
                <p>广东 佛山市 南海区 狮山镇 顺丰速运(阳光在线广场店)</p> <!-- 详细地址 -->
            </div>
            <button class="add-address">添加新地址</button> <!-- 添加新地址按钮 -->
        </div>
        <div class="product-info"> <!-- 商品及优惠券信息容器 -->
            <h2>商品及优惠券</h2> <!-- 商品及优惠券标题 -->
            <div class="product-item"> <!-- 商品项容器 -->
                <img src="C:\Users\Liangzc\Desktop\xiaomi-official-website-master\img\r1.webp" alt="Product Icon"> <!-- 商品图标 -->
                <div class="product-details"> <!-- 商品详情容器 -->
                    <p>Redmi K70 至尊版 12GB+512GB 墨羽黑</p> <!-- 商品名称 -->
                    <p>2599元 x 1</p> <!-- 商品价格 -->
                </div>
                <p class="product-price">2599元</p> <!-- 商品总价 -->
            </div>
        </div>
        <div class="shipping-method"> <!-- 配送方式容器 -->
            <h2>配送方式</h2> <!-- 配送方式标题 -->
            <p>包邮</p> <!-- 配送方式描述 -->
        </div>
        <div class="invoice-info"> <!-- 发票信息容器 -->
            <h2>发票</h2> <!-- 发票标题 -->
            <p>数电普通发票 | 个人 | 商品明细</p> <!-- 发票类型描述 -->
            <a href="#">修改 ></a> <!-- 修改发票信息链接 -->
        </div>
        <div class="invoice-section"> <!-- 发票部分容器 -->
            <h2>发票</h2> <!-- 发票标题 -->
            <div class="invoice-options"> <!-- 发票选项容器 -->
                <span>数电普通发票</span> <!-- 发票类型 -->
                <span>个人</span> <!-- 发票类型 -->
                <span>商品明细</span> <!-- 发票类型 -->
                <a href="#">修改 ></a> <!-- 修改发票信息链接 -->
            </div>
            <div class="coupons-section"> <!-- 优惠券部分容器 -->
                <div class="coupon-item"> <!-- 优惠券项容器 -->
                    <span class="icon">+</span> <!-- 优惠券图标 -->
                    使用优惠券 无可用 <!-- 优惠券描述 -->
                </div>
                <div class="coupon-item"> <!-- 优惠券项容器 -->
                    <span class="icon">+</span> <!-- 优惠券图标 -->
                    使用小米礼品卡 <!-- 优惠券描述 -->
                </div>
            </div>
        </div>
        <div class="summary-section"> <!-- 订单摘要容器 -->
            <div class="summary-item"> <!-- 摘要项容器 -->
                <span>商品件数：</span> <!-- 商品件数标题 -->
                <span>1件</span> <!-- 商品件数 -->
            </div>
            <div class="summary-item"> <!-- 摘要项容器 -->
                <span>商品总价：</span> <!-- 商品总价标题 -->
                <span>2599元</span> <!-- 商品总价 -->
            </div>
            <div class="summary-item"> <!-- 摘要项容器 -->
                <span>活动优惠：</span> <!-- 活动优惠标题 -->
                <span>-0元</span> <!-- 活动优惠 -->
            </div>
            <div class="summary-item"> <!-- 摘要项容器 -->
                <span>优惠券抵扣：</span> <!-- 优惠券抵扣标题 -->
                <span>-0元</span> <!-- 优惠券抵扣 -->
            </div>
            <div class="summary-item"> <!-- 摘要项容器 -->
                <span>运费：</span> <!-- 运费标题 -->
                <span>0元</span> <!-- 运费 -->
            </div>
            <div class="summary-item total"> <!-- 摘要项容器 -->
                <span>应付总额：</span> <!-- 应付总额标题 -->
                <span>2599元</span> <!-- 应付总额 -->
            </div>
        </div>
        <div class="action-buttons"> <!-- 操作按钮容器 -->
            <button class="back-to-cart">返回购物车</button> <!-- 返回购物车按钮 -->
            <button class="proceed-to-pay">去结算</button> <!-- 去结算按钮 -->
        </div>
    </div>
</body>
</html>